<template>


    <div>
        <h2>每日报表</h2>
        <div class="container">
            <div>
                <el-form :inline="true" :model="params" class="demo-form-inline">
                    <el-form-item label="应用系统">
                        <el-select v-model="params.platform" placeholder="请选择系统" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全平台"></el-option>
                            <el-option key="android" value="android" label="安卓"></el-option>
                            <el-option key="ios" value="ios" label="苹果"></el-option>
                            <el-option key="wechart" value="wechart" label="微信"></el-option>
                            <el-option key="jrtt" value="jrtt" label="今日头条"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用市场">
                        <el-select v-model="params.channel" placeholder="请选择市场" size="mini" style="width:100px">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option v-if="params.platform=='android'" key="offical" value="offical" label="官网"></el-option>
                            <el-option v-if="params.platform=='android'" key="huawei" value="huawei" label="华为"></el-option>
                            <el-option v-if="params.platform=='android'" key="xiaomi" value="xiaomi" label="小米"></el-option>
                            <el-option v-if="params.platform=='android'" key="vivo" value="vivo" label="VIVO"></el-option>
                            <el-option v-if="params.platform=='android'" key="oppo" value="oppo" label="OPPO"></el-option>
                            <el-option v-if="params.platform=='android'" key="sanxing" value="sanxing" label="三星"></el-option>
                            <el-option v-if="params.platform=='android'" key="baidu" value="baidu" label="百度"></el-option>
                            <el-option v-if="params.platform=='android'" key="360" value="360" label="360"></el-option>
                            <el-option v-if="params.platform=='android'" key="wanoujia" value="wanoujia" label="豌豆荚"></el-option>
                            <el-option v-if="params.platform=='android'" key="yingyongbao" value="yingyongbao" label="应用宝"></el-option>
                            <el-option v-if="params.platform=='android'" key="yingyongbaocpd" value="yingyongbaocpd" label="应用宝CPD"></el-option>
                            <el-option v-if="params.platform=='android' || params.platform=='ios' || params.platform=='wechart'" key="qingming2019" value="qingming2019" label="清明活动"></el-option>
                            <el-option v-if="params.platform=='android' || params.platform=='ios' || params.platform=='wechart'" key="register2019" value="register2019" label="推广运营"></el-option>
                            <el-option v-if="params.platform=='android'" key="jrtt1" value="jrtt1" label="今日头条1"></el-option>
                            <el-option v-if="params.platform=='android'" key="jrtt2" value="jrtt2" label="今日头条2"></el-option>
                            <el-option v-if="params.platform=='android'" key="jrtt3" value="jrtt3" label="今日头条3"></el-option>
                            <el-option v-if="params.platform=='android'" key="jrtt4" value="jrtt4" label="今日头条4"></el-option>
                            <el-option v-if="params.platform=='android'" key="jrtt5" value="jrtt5" label="今日头条5"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="01" value="01" label="01"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="02" value="02" label="02"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="03" value="03" label="03"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="04" value="04" label="04"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="05" value="05" label="05"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="06" value="06" label="06"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="07" value="17" label="07"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="08" value="08" label="08"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="09" value="09" label="09"></el-option>
                            <el-option v-if="params.platform=='jrtt'" key="010" value="010" label="010"></el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item label="统计时间">
                        <el-date-picker
                                v-model="params.datetime"
                                type="date"
                                placeholder="日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                size="mini">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="reload" size="mini">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-alert
                    title="查询结果:"
                    type="success"
                    :closable="false"><el-tag>充值金额:{{total_recharge_amount}}元</el-tag><el-tag>付款金额:{{total_pay_amount}}元</el-tag>
                 </el-alert>
            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="today"
                        label="日期"
                        >
                </el-table-column>
                <el-table-column
                        prop="app_platform_cn"
                        label="平台"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="app_channel_cn"
                        label="渠道" width="100"
                        >
                </el-table-column>
                <el-table-column label="用户数">
                    <el-table-column prop="user_num" label="注册" width="60"></el-table-column>
                    <el-table-column prop="user_order_num" label="下单" width="60"></el-table-column>
                    <el-table-column prop="user_pay_num" label="付款" width="60"></el-table-column>
                </el-table-column>
                <el-table-column label="订单数">
                    <el-table-column prop="order_num" label="总数" width="60"></el-table-column>
                    <el-table-column prop="nopay_order_num" label="未付" width="60"></el-table-column>
                    <el-table-column prop="pay_order_num" label="已付" width="60"></el-table-column>
                    <el-table-column prop="meal_order_num" label="套餐" width="50"></el-table-column>
                    <el-table-column prop="direct_order_num" label="直充" width="50"></el-table-column>
                    <el-table-column prop="first_order_num" label="首单" width="50"></el-table-column>
                    <el-table-column prop="retry_order_num" label="复购" width="50"></el-table-column>
                </el-table-column>
                <el-table-column label="充值金额">
                    <el-table-column prop="recharge_amount" label="油卡总额"></el-table-column>
                    <el-table-column prop="meal_recharge_amount" label="油卡套餐"></el-table-column>
                    <el-table-column prop="direct_recharge_amount" label="油卡直充"></el-table-column>
                    <el-table-column prop="mobile_recharge_amount" label="话费充值"></el-table-column>
                    <el-table-column prop="today_recharge_amount" label="当日到账"></el-table-column>
                    <el-table-column prop="history_recharge_amount" label="分期到账"></el-table-column>
                    <el-table-column prop="coupon_amount" label="优惠券"></el-table-column>
                </el-table-column>
                <el-table-column
                        prop="pay_amount"
                        label="支付金额"
                >
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>
    </div>

</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        items: [],
        loading: false,
        params: {
          limit: 10,
          offset: 0,
          datetime:'',
          platform:'all',
          channel:'all'
        },
        currentPage: 1,
        total: 0,
        result: '',
        total_recharge_amount:0,
        total_pay_amount:0
      }
    },
    created() {
      this.fetch();
    },
    methods: {
      fetch() {
        this.loading = true;
        axios.get('/admin/api/report/everyday', {params: this.params}).then((res) => {
          if (res.data.code === 0) {
            this.items = res.data.data.items;
            this.total = res.data.data.total;
            this.total_recharge_amount = res.data.data.total_recharge_amount;
            this.total_pay_amount = res.data.data.total_pay_amount;
          } else {
            this.$message(res.data.msg);
          }
          this.loading = false;
        }).catch(function () {
          this.$message('系统错误');
          this.loading = false;
        })
      },

      // 切换分页
      setPage: function (page) {
        this.currentPage = page;
        this.params.offset = (page - 1) * this.params.limit;
        this.fetch()
      },
      // 重新请求接口获取数据，参数发生了变化，页码重置为1
      reload: function () {
        if (this.currentPage === 1) {
          this.fetch();
        } else {
          this.setPage(1);
        }
      }
    }
  }
</script>